<template>
	<view class="self-view">

		<view class="top-background">

		</view>


		<view class="top" :style="{'padding-top': paddingTop,'height': inputHeight}">

			<view class="avatar" @click="showUserInfo" :style="{'height': inputHeight,'width': inputHeight}">
				<image mode="aspectFill" :src="userInfo.avatar"></image>
			</view>



			<!-- #ifndef  MP-WEIXIN -->
			<view class="search" @click="toSearch">
				<uni-icons style="margin-left: 20rpx;margin-right: 10rpx;" type="search" size="25" color="#b8b8b8">
				</uni-icons>
				<view style="color: #b8b8b8;">搜索候浪内容</view>
			</view>

			<view
				style="width: 200rpx;display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
				<uni-icons style="margin-right: 10rpx;" type="notification" size="30" color="rgba(30, 30, 30, 0.6)"
					@click="toMessage">
				</uni-icons>
				<uni-icons type="gear" size="30" color="rgba(30, 30, 30, 0.6)" @click="toSelfEdit"></uni-icons>
			</view>
			<!-- #endif -->

			<!-- #ifdef  MP-WEIXIN -->
			<view class="search" style="width:250rpx" @click="toSearch" :style="{'height': inputHeight}">
				<uni-icons style="margin-left: 20rpx;margin-right: 10rpx;" type="search" size="25" color="#b8b8b8">
				</uni-icons>
				<view style="color: #b8b8b8;">搜索</view>
			</view>

			<view
				style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end;margin-right: 180rpx;"
				:style="{'height': inputHeight}">
				<uni-icons style="margin-right: 10rpx;" type="notification" size="30" color="rgba(30, 30, 30, 0.6)"
					@click="toMessage">
				</uni-icons>
				<uni-icons type="gear" size="30" color="rgba(30, 30, 30, 0.6)" @click="toSelfEdit"></uni-icons>
			</view>
			<!-- #endif -->


		</view>

		<view class="info">

			<view class="goal" @click="toBeHular()">
				<view class="goal-text">{{userHula? userHula.goal : '成为候浪平台核心共创者'}}</view>
				<uni-icons style="margin-left: 20rpx;" type="right" size="10" color="#5DACB1"></uni-icons>
			</view>

			<view class="self-intro">
				<view class="intro-item" @click="toMind">
					<img src="https://www.cdn.kxcdedu.top/image/default/939202ADF18A4A4A9E21F572F4DA8D14-6-2.png"></image>
				</view>
				<view class="intro-item" @click="toWind">
					<img src="https://www.cdn.kxcdedu.top/image/default/350D4EBB51834ACEA0025B0000B649BC-6-2.png"></image>
				</view>
			</view>
		</view>

		<view class="info-title">
			<view class="left">
				<view class="title-icon">
					<image mode="aspectFill" src="@/static/examples/todayClass.png"></image>
				</view>
				<view>今日课表</view>
			</view>
			<view class="right" @click="toClassTableManage">
				<view>管理</view>
				<uni-icons style="margin-left: 10rpx;" type="right" size="10" color="#8b8b8b"></uni-icons>
			</view>
		</view>

		<view class="classTable" v-if="dayClass && dayClass.length > 0">
			<view class="classTableItem" :class="{'class-no' : myClass.classStatus != 2}" v-for="myClass in dayClass">
				<view class="className" :class="{'class-over' : myClass.classStatus == 2}">{{myClass.className}}</view>
				<view class="classTime" :class="{'class-over' : myClass.classStatus == 2}">{{myClass.classTime}}</view>
				<view class="classLocationAndStatus">
					<view class="classLocation" :class="{'class-over' : myClass.classStatus == 2}">
						{{myClass.classLocation}}
					</view>
					<view class="classStatus">{{classStatusList[myClass.classStatus]}}</view>
				</view>
			</view>
		</view>

		<view v-if="dayClass && dayClass.length == 0"
			style="width: 690rpx;color:#378F99;height: 100rpx;line-height:100rpx;;text-align: center;margin-bottom: 30rpx;margin-left: 30rpx;background-color: #DAEFEE;border-radius: 20rpx;">
			今天没有课哦,约上好友出去找乐子吧~
		</view>

		<view v-if="dayClass == null"
			style="width: 690rpx;color:#378F99;height: 100rpx;line-height:100rpx;;text-align: center;margin-bottom: 30rpx;margin-left: 30rpx;background-color: #DAEFEE;border-radius: 20rpx;">
			还没有加入班级哦，进入管理绑定班级~
		</view>

		<view class="info-title">
			<view class="left">
				<view class="title-icon">
					<image src="@/static/examples/todayTodo.png"></image>
				</view>
				<view>今日待办</view>
			</view>
			<view class="right" @click="toTodoManage">
				<view>全部</view>
				<uni-icons style="margin-left: 10rpx;" type="right" size="10" color="#8b8b8b"></uni-icons>
			</view>

		</view>

		<view class="todos">

			<view class="todo" v-for="(item, index) in todoList" :key="item.id"
				:style="'background-color:'+(item.teamTodoId == null ? '#DAEFEE;' : '#D9EDFF;') + 'border-left:' + (item.teamTodoId == null ? 'solid 0px #378F99;' : 'solid 0px #2CA5D1;')">
				<view class="todo-card">

					<view class="todo-check" @click="finishOrCoverTodo(item.id,index)">
						<uni-icons v-if="item.status == 1" type="checkmarkempty" size="20" color="#9a9a9a"></uni-icons>
					</view>

					<view class="todo-info" style="width: 100%" @tap="showTodoEdit(item)"
						@longpress="deleteTodo(item.id)">
						<view class="todo-title" :class="{'todo-over' : item.status == 1 }"
							:style="'color:'+(item.teamTodoId == null ? '#378F99;' : '#2CA5D1;')">
							{{ item.title }}
						</view>
						<view :class="{'todo-over' : item.status == 1 }"
							style="display: flex; flex-direction: column; justify-content: space-between; margin-top: 8rpx">
							<view class="todo-brief" v-if="item.gmtEnd != null">
								截止时间：{{ item.gmtEnd ? item.gmtEnd : '无截止日期' }}</view>
							<view class="todo-brief" v-if="item.monitorId != null">负责人：{{ item.monitorName}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<uni-popup ref="todoEdit" type="bottom">
			<view class="modal-box">
				<view class="modal-title">待办</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">标题</text>
						<input type="text" v-model="todoInput.title" placeholder="请输入:" />
					</view>
					<view v-if="type != 1" class="modal-main-item">
						<text class="modal-key">截止日期</text>
						<picker mode="date" :value="todoInput.gmtEnd" :start="today" end="2023-12-30"
							@change="bindDateChange">
							<view class="picker-input">当前选择: {{ todoInput.gmtEnd ? todoInput.gmtEnd : '无截止日期' }}</view>
						</picker>
					</view>
					<view class="modal-main-item">
						<text class="modal-key">标签</text>
						<view class="modal-tags">
							<view class="modal-tag" @tap="changeChosenTag(index)"
								:class="{'chosen-tag' : chosenTagsIndex[index]}" v-for="(item, index) in tags"
								:key="index">
								{{ item.name }}
							</view>
							<text v-if="tags.length == 0">还未添加标签噢</text>
						</view>
					</view>
				</view>

				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel()">取消</view>
					<view v-if="todoInput.id" @tap="removeTodoFromToday(todoInput.id)">
						{{todoInput.isToday == 0 ? '移入' : '移出'}}今日
					</view>
					<view class="modal-confirm" @tap="modalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="userInfo" type="left">
			<view class="userInfo-modal">
				<view class="user-info">
					<view style="display: flex;flex-direction: row;width: 100%;justify-content: space-between;align-items: center;">
						<view class="avatar" @click="toHulaIntro">
							<image mode="aspectFill" :src="userInfo.avatar"></image>
						</view>
						<view @click="toHulaIntro" style="margin-right: 160rpx;display: flex;flex-direction: row;align-items: center;">
							<view>个人中心</view>
							<uni-icons type="right" size="15" color="#595959"></uni-icons>
						</view>
					</view>
					<view class="name">{{userInfo.nickname}}</view>
					<view class="summary">{{userInfo.summary}}</view>
				</view>

				<view class="user-data">
					<view class="user-data-item">
						<view class="data-item-value">
							{{userData.createCount ? userData.createCount : 0}}
						</view>
						<view class="data-item-key">
							创作
						</view>
					</view>
					<view class="user-data-item">
						<view class="data-item-value">
							{{userData.followCount ? userData.createCount : 0}}
						</view>
						<view class="data-item-key">
							关注
						</view>
					</view>
					<view class="user-data-item">
						<view class="data-item-value">
							{{userData.followedCount ? userData.createCount : 0}}
						</view>
						<view class="data-item-key">
							粉丝
						</view>
					</view>
				</view>

				<view class="userInfo-line"></view>

				<view class="modal-info-title">
					<view class="title-icon">
						<image mode="aspectFill" src="@/static/examples/collect.png"></image>
					</view>
					<view>收藏</view>
				</view>

				<view class="modal-info-title">
					<view class="title-icon">
						<image mode="aspectFill" src="@/static/examples/fixed.png"></image>
					</view>
					<view>常驻</view>
				</view>

				<view class="modal-info-title">
					<view class="title-icon">
						<image mode="aspectFill" src="@/static/examples/coin.png"></image>
					</view>
					<view>账户{{userData.hulaCoin ? '('+userData.hulaCoin+')' : ''}}</view>
				</view>

				<view class="modal-info-title">
					<view class="title-icon">
						<image mode="aspectFill" src="@/static/examples/message.png"></image>
					</view>
					<view >联系我们</view>
				</view>
			</view>
		</uni-popup>

		<view class="page-btns">
			<view class="button" @click="showTodoEdit()">
				<img src="https://www.cdn.kxcdedu.top/image/default/85118A5CE98948DD9D78170B280BCA5D-6-2.png" />
				<!-- <uni-icons @click="showTodoEdit" type="plusempty" size="30" color="#FFFFFF"></uni-icons> -->
			</view>
		</view>

	</view>
</template>

<script>
	import {
		genTestUserSig
	} from '../../debug/GenerateTestUserSig.js';
	import store from '@/store'
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				todoList: [],

				checked: false,
				modalHidden: false,
				isToday: 0,
				today: null,
				type: 0,


				todoInput: {
					title: "",
					gmtEnd: null
				},
				tags: [{
						id: "1",
						name: "今日"
					},
					{
						id: "2",
						name: "重要"
					}
				],
				chosenTagsIndex: [false, false],

				currentIndex: '',



				dayClass: [],
				classStatusList: ["未开始", "上课中", "已下课", "嗨皮中"],
				userInfo: {
					avatar: "https://img.ixintu.com/download/jpg/20210209/9e842a3dbf66252db019066904662f47_512_512.jpg!bg"
				},
				userData: {},
				userHula: null,

				paddingTop: null,
				inputHeight: "70rpx"
			}
		},
		onLoad() {
			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 2.获取状态栏高度
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();

			// 4.计算出导航栏高度  换算成rpx
			let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);

			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.inputHeight = menuButton.height * (750 / windowWidth) + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';

			// #endif
			
			
			if(this.$isLogin()){
				this.getUserInfoAndLoginIM()
			}
		},
		onShow() {
			if(this.$isLogin()){
				this.getUserData()
				this.getMyTodayTodoList()
				this.getUserInfo()
			}else{
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			getUserData() {
				this.$api.getUserData().then(res => {
					this.userData = res.data;
				})
			},
			getUserHula() {
				this.$api.getUserHula().then(res => {
					this.userHula = res.data;
				})
			},
			getUserInfo() {
				this.$api.getUserInfo().then(res => {
					this.userInfo = res.data;
					if (res.data.role > 1) {
						this.getUserHula()
					}
				})
			},
			getUserInfoAndLoginIM(){
				this.$api.getUserInfo().then(res => {
					this.userInfo = res.data;
					if (res.data.role > 1) {
						this.getUserHula()
					}
					this.loginIM(this.userInfo)
				})
			},

			loginIM(userInfo) {
				uni.$TUIKit.login({
					userID:userInfo.account,
					userSig: genTestUserSig(userInfo.account).userSig
				}).then((imResponse) => {
					console.log('im login okk!!!!!', imResponse.data); // 登录成功

					setTimeout(()=>{
						uni.$TUIKit.updateMyProfile({
							nick: userInfo.nickname,
							avatar: userInfo.avatar,
						})
					},3000)
				}).catch(function(imError) {
					console.warn('login error:', imError); // 登录失败的相关信息
				});


			},

			getMyTodayTodoList: function() {
				this.$api.getMyTodayTodoList().then(res => {
					this.todoList = res.data.todoList
					this.todoList = [...this.todoList, ...res.data.todoDownList]
					this.dayClass = res.data.dayClass
				})
			},




			showTodoEdit(item) {
				if (item) {
					this.todoInput = item
					this.tagIdsToIndex(item.tagIds)
				} else {
					this.todoInput = {
						title: "",
						data: null
					}
				}
				this.$refs.todoEdit.open('bottom')
			},





			addTodo: function() {
				this.$api.addTodo({
					title: this.todoInput.title,
					isToday:1,
					gmtEnd: this.todoInput.gmtEnd,
					tagIds: this.indexToTagIds()
				}).then(res => {
					this.getMyTodayTodoList()
				})
			},
			deleteTodo: function(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该待办吗',
					success(res) {
						if (res.confirm) {
							that.$api.deleteTodo({
								id
							}).then(res => {
								that.getMyTodayTodoList()
							})
						}
					}
				});
			},
			updateTodo: function() {
				this.$api.updateTodo({
					gmtEnd: this.todoInput.gmtEnd,
					title: this.todoInput.title,
					id: this.todoInput.id,
					tagIds: this.indexToTagIds()
				}).then(res => {
					this.getMyTodayTodoList()
				})
			},
			finishOrCoverTodo(id, index) {
				console.log("触发")
				if (this.todoList[index].status == 1) {
					// 发起待办恢复
					this.todoList[index].status = 0
					this.$api.recoverTodo({
						id
					}).then(res => {
						this.todoList[index].status = 0
					})
				} else {
					this.todoList[index].status = 1
					this.$api.finishTodo({
						id
					}).then(res => {
						uni.showToast({
							title: '已完成',
							duration: 500
						});
						let temp = this.todoList[index]
						this.todoList.splice(index, 1)
						this.todoList.push(temp)
					})
				}
			},
			// 移除今日待办
			removeTodoFromToday: function(id) {
				this.$api.removeTodoFromToday({
					id
				}).then(res => {
					this.getMyTodayTodoList()
				})
			},




			// 标签选中标记数组 -> id数组
			indexToTagIds: function() {
				let ids = [];

				for (let i = 0; i < this.chosenTagsIndex.length; i++) {
					if (this.chosenTagsIndex[i]) {
						ids.push(this.tags[i].id);
					}
				}

				return ids;
			},
			tagIdsToIndex: function(ids) {
				let chosenTagsIndex = [];
				for (let i = 0; i < this.tags.length; i++) {
					for (let id of ids) {
						if (id === this.tags[i].id) {
							chosenTagsIndex.push(true);
							break;
						}
					}
					if (chosenTagsIndex[i] != true) {
						chosenTagsIndex.push(false);
					}
				}
				this.chosenTagsIndex = chosenTagsIndex
			},




			changeChosenTag: function(chosenindex) {
				console.log(chosenindex)
				this.chosenTagsIndex[chosenindex] = !this.chosenTagsIndex[chosenindex];
				this.$forceUpdate()
			},

			bindDateChange: function(e) {
				this.todoInput.gmtEnd = e.detail.value
				this.$forceUpdate()
			},


			//点击取消
			modalCancel: function() {
				this.closeModal();
			},
			//点击确认
			modalConfirm: function(e) {
				if (this.todoInput.id != null) {
					this.updateTodo();
				} else {
					this.addTodo();
				}
				this.closeModal();
			},
			// 模态框关闭：统一清理动作
			closeModal: function() {
				this.$refs.todoEdit.close('bottom')
				this.clear();
			},
			// 表单清理
			clear: function() {
				let len = this.tags.length;
				let chosenTagsIndex = Array(len).fill(false);
				this.date = '';
				this.title = '';
				this.id = null;
				this.chosenTagsIndex = "";
			},




			showUserInfo() {
				this.$refs.userInfo.open('left')
			},

			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},

			toTodoManage() {
				uni.navigateTo({
					url: '/pages_self/todo-manage'
				})
			},



			toMessage() {
				uni.navigateTo({
					url: '/pages/message/message'
				})
			},

			toBeHular() {
				if (this.userHula) {
					uni.navigateTo({
						url: '/pages_self/hula/hula-edit'
					})
				} else {
					uni.navigateTo({
						url: '/pages_self/hula/hula-apply'
					})
				}
			},

			toBackPage() {
				uni.navigateBack()
			},


			toSelfEdit() {
				uni.navigateTo({
					url: '/pages_self/edit/user-info-edit'
				})
			},
			toClassTableManage() {
				uni.navigateTo({
					url: '/pages_self/edit/class-table-edit'
				})
			},
			toMind() {
				uni.navigateTo({
					url: '/pages_self/mind/mind-mine'
				})
			},
			toWind() {
				uni.navigateTo({
					url: '/pages_self/wind/wind-mine'
				})
			},
			toHulaIntro() {
				uni.navigateTo({
					url: '/pages_self/hula/hula-intro?userId='+this.userInfo.id
				})
			},
			...mapActions(['getUserInfoAction']),
		},
		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		}
	}
</script>

<style scoped lang="scss">
	.self-view {
		position: relative;
		min-height: 100vh;
		padding: 0;
		margin: 0;
		padding-bottom: 40rpx;
		background-color: #FFFFFF;

		.top-background {
			position: absolute;
			z-index: 1;
			width: 750rpx;
			height: 550rpx;
			background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
			background-repeat: no-repeat;
			background-size: cover;
		}


		.top {
			position: relative;
			top: 0;
			z-index: 2;


			width: 690rpx;
			padding: 0 30rpx;
			height: 80rpx;
			padding-top: 100rpx;

			// #ifdef H5
			padding-top: 40rpx;
			// #endif

			display: flex;
			flex-direction: row;
			align-items: center;



			.avatar {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				border: solid #FFFFFF;
				overflow: hidden;
			}

			.search {
				margin-left: 30rpx;
				margin-right: 30rpx;
				height: 70rpx;
				width: 350rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-radius: 50rpx;

				background-color: rgba(255, 255, 255, 1);
			}
		}


		.info {

			display: flex;
			flex-direction: column;
			margin-top: 280rpx;
			padding-bottom: 20rpx;
			position: relative;
			z-index: 2;

			width: 750rpx;
			height: 150rpx;
			background-color: #FFFFFF;

			border-radius: 60rpx 60rpx 0 0;

			.goal {

				position: absolute;
				top: -230rpx;

				width: 100%;

				margin-top: 40rpx;

				display: flex;
				flex-direction: row;
				justify-content: center;
				font-weight: bold;
				align-items: center;
				font-size: 36rpx;

				.goal-text {
					letter-spacing: 5rpx;
					background: linear-gradient(90deg, rgba(55, 143, 153, 1) 0%, rgba(171, 111, 94, 0.43) 51.31%, rgba(102, 173, 239, 1) 100%);
					-webkit-background-clip: text;
					color: transparent;
				}

			}

			.self-intro {
				position: absolute;
				top: -80rpx;


				width: 690rpx;
				margin-left: 30rpx;
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;


				.intro-item {
					height: 190rpx;
					width: 330rpx;
					border-radius: 20rpx;
					overflow: hidden;
				}
			}
		}

		.info-title {
			width: 690rpx;
			font-size: 36rpx;
			margin-left: 30rpx;
			margin-bottom: 30rpx;

			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-end;




			.left {
				display: flex;
				flex-direction: row;
				font-weight: bold;

				.title-icon {
					width: 50rpx;
					height: 50rpx;
					margin-right: 10rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 28rpx;
				margin-bottom: 5rpx;
			}


		}


		.classTable {
			display: flex;
			flex-direction: row;

			overflow-x: scroll;
			width: 720rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
			margin-left: 30rpx;


			.classTableItem {
				flex-shrink: 0;
				width: 260rpx;
				height: 140rpx;
				padding: 30rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
				background-color: #BABABA;
				box-shadow: 0px 0px 4px 2px #f5f7f5;
				color: #FFFFFF;

				.className {}

				.classTime {
					font-size: 28rpx;
					margin-top: 10rpx;
				}

				.classLocationAndStatus {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					font-size: 28rpx;
					margin-top: 15rpx;


				}

				.class-over {
					text-decoration: line-through;
				}

			}


			.class-no {
				background-color: #6AB9C0;
			}


		}



		.todos {
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 2;
			width: 720rpx;
			overflow: hidden;

			margin-left: 30rpx;
			margin-top: 30rpx;

			.todo {

				width: 690rpx;
				// box-shadow: 0px 0px 4px 2px #f5f7f5;
				padding: 25rpx 0;
				border-radius: 25rpx;
				background-color: #FFFFFF;
				margin-bottom: 30rpx;


				.todo-card {
					display: flex;
					align-items: center;


					.todo-check {
						height: 40rpx;
						width: 45rpx;
						// border: solid thin #636363;
						border-radius: 10rpx;
						margin-left: 30rpx;
						margin-right: 30rpx;

						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						background-color: #FFFFFF;
					}

					.todo-info {
						display: block;
					}

					.todo-title {
						font-size: 32rpx;
						font-weight: bold;

					}

					.todo-brief {
						font-size: 24rpx;
						color: rgba(30, 30, 30, 0.6);
					}

					.todo-over {
						text-decoration: line-through;
						color: #9a9a9a;
					}

					/* 待办滑动操作按钮 */
					.todo-btns {
						position: absolute;
						right: -310rpx;

						display: flex;
						justify-content: left;
						align-items: center;

						box-sizing: border-box;
						width: 300rpx;
						height: 120rpx;
						padding-left: 40rpx;

						text-align: center;
						color: #fff;
						line-height: 120rpx;
					}

					.todo-btns view {
						width: 80rpx;
						height: 120rpx;
						font-size: 28rpx;
						margin-right: 20rpx;
						border-radius: 20rpx;
					}

					.todo-btns .detail {
						background-color: #97C5FC;
					}
				}

				.todo-btns .delete {
					background-color: #f10e0e;
				}
			}
		}

		.userInfo-modal {
			width: 550rpx;
			height: 100vh;
			background: white;
			display: flex;
			flex-direction: column;
			background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
			background-repeat: no-repeat;
			background-size: cover;



			.user-info {
				width: 490rpx;
				margin-left: 30rpx;
				margin-top: 100rpx;

				// #ifdef H5
				margin-top: 40rpx;
				// #endif

				display: flex;
				flex-direction: column;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					border: solid #FFFFFF;
				}

				.name {
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 20rpx;
					color: #2c2c2c;
				}

				.summary {
					margin-top: 20rpx;
					color: #7f7f7f;
					font-size: 28rpx;
				}

			}

			.user-data {
				width: 490rpx;
				margin-left: 30rpx;
				margin-top: 30rpx;

				display: flex;
				flex-direction: row;

				.user-data-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 20rpx;

					.data-item-key {
						color: #bcbcbc;
						margin-left: 20rpx;
						font-size: 28rpx;
					}

					.data-item-value {
						font-size: 36rpx;
						color: #2c2c2c;
					}
				}

			}

			.userInfo-line {
				margin: 40rpx 0 100rpx;
				width: 100%;
				height: 3rpx;
				background-color: #CCCCCC;
			}

			.modal-info-title {
				width: 490rpx;
				margin-left: 30rpx;
				font-size: 32rpx;
				margin-bottom: 50rpx;

				display: flex;
				flex-direction: row;
				align-items: center;

				.title-icon {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}

		}

		.modal-box {
			width: 600rpx;
			margin-left: 35rpx;
			margin-bottom: 400rpx;


			padding: 40rpx;
			border-radius: 20rpx;
			background: white;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text-align: left;


			.modal-title {
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 600;
				text-align: center;
			}

			.modal-main {
				width: 100%;
				font-size: 26rpx;
				margin: 20rpx 0 40rpx;


				.modal-main-item {
					width: 100%;
					margin-bottom: 30rpx;

					.modal-key {
						display: block;

						font-size: 32rpx;
						margin-bottom: 10rpx;
					}

					/* 模态框单项：多选标签 */
					.modal-tags {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						min-height: 80rpx;
					}

					.modal-tag {
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						margin: 0 20rpx 10rpx 0;
						background-color: rgb(231, 240, 247);
					}

					.chosen-tag {
						background: darkorange;
					}

				}

				.modal input,
				.modal .picker-input {
					box-sizing: border-box;
					margin: 10rpx 0;
					width: 100%;
					height: 60rpx;
					border-radius: 20rpx;
					padding: 0 20rpx;
					background-color: aliceblue;

					line-height: 60rpx;
				}

			}

			.modal-operations {
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-top: 20rpx;

				text-align: center;
			}

			.modal-operations>view {
				font-weight: bold;
				padding: 10rpx;
				border-radius: 4rpx;

				width: 40%;
			}

		}

	}

	.page-btns {
		display: flex;
		position: fixed;
		right: 80rpx;
		bottom: 100rpx;
		z-index: 10;


		.button {
			width: 150rpx;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// border: solid #5DACB1;



			border-radius: 50rpx;
			color: white;
		}
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
